<template>
    <div class="chart-container" ref="chartRef"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'StatisticalChart',
    data() {
        return {
            chart: null,
            option: {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        padAngle: 5,
                        itemStyle: {
                            borderRadius: 10
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: '习题' },
                            { value: 735, name: '课程视频' },
                            { value: 580, name: '实验视频' },
                            { value: 484, name: '课程资源' },
                        ]
                    }
                ]
            }
        }
    },
    mounted() {
        this.initChart();
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        if (this.chart) {
            this.chart.dispose();
            this.chart = null;
        }
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chartRef);
            this.chart.setOption(this.option);
        },
        handleResize() {
            if (this.chart) {
                this.chart.resize();
            }
        }
    }
}
</script>

<style scoped lang="scss">
.chart-container {
    width: 100%;
    height: 380px;
}
</style>